{% extends "../layouts/blog-layouts.html" %}

{% block title %}{{ data.article.Title }}{% endblock %}

{% block head %}
    <link rel="stylesheet" href="/public/home/css/home.css" />
    <link rel="stylesheet" href="/public/common/css/github-markdown-css/5.1.0/github-markdown.css"/>
    <script src="/public/common/js/clipboard/clipboard.min.js"></script>
    <script src="/public/common/js/md5/md5.min.js"></script>
{% endblock %}

{% block content %}
    <div class="app-blog-action" id="js-blog-action">
        <div id="js-like-btn" class="action-btn js-post-btn with-badge" badge="{{ data.article.Likes }}" data-type="like" data-id="{{ data.article.Id }}">
            <i class="fa animated fa-thumbs-up"></i>
        </div>
        <div class="action-btn js-post-btn with-badge" badge="{{ data.commentTotal }}" data-type="comment">
            <i class="fa animated fa-commenting"></i>
        </div>
        <div class="action-btn js-share-action" data-type="">
            <i class="fa animated fa-share"></i>
            <div class="action-share-popup">
                <ul class="action-share-list">
                    <li class="share-item wechat" data-type="wechat">
                        <i class="fa fa-weixin"></i>
                        <span class="share-item-title">微信</span>
                        <div class="wechat-qrcode animated bounceIn">
                            <div class="wechat-qrcode-img"></div>
                            <span class="wechat-qrcode-title">微信扫一扫</span>
                        </div>
                    </li>
                    <li class="share-item qq" data-type="qq">
                        <i class="fa fa-qq"></i>
                        <span class="share-item-title">QQ</span>
                    </li>
                    <li class="share-item weibo" data-type="weibo">
                        <i class="fa fa-weibo"></i>
                        <span class="share-item-title">新浪微博</span>
                    </li>
                    <li class="share-item link" data-type="link" title="复制文章链接">
                        <i class="fa fa-link"></i>
                        <span class="share-item-title">文章链接</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="app-blog-detail app-detail-model app-content-item">
        <div class="app-detail-title">
            <h1>{{ data.article.Title }}</h1>
        </div>
        <div class="app-detail-overview">
            <div class="info">
                <div class="avatar">
                    {% if data.article.Avatar %}
                        <img src="{{ data.article.Avatar }}" alt="">
                    {% else %}
                        <img src="/public/uploads/visitor.png" alt="">
                    {% endif %}
                </div>
                <div class="statis">
                    <div class="author">{{ data.article.Author }}</div>
                    <div class="assist">
                            <div class="comment"><i class="fa fa-comment-o"></i>{{ data.commentTotal }} 评论</div>
                        <i>/</i>
                        <div class="like"><i class="fa fa-thumbs-o-up"></i><b>{{ data.article.Likes }}</b> 点赞</div>
                        <i>/</i>
                        <div class="views"><i class="fa fa-eye"></i><b>{{ data.article.Views }}</b> 阅读</div>
                        <i>/</i>
                        <div class="words"><i class="fa fa-file-word-o"></i>{{ data.article.Content | length }} 字</div>
                    </div>
                </div>
            </div>
            <div class="date">
                <b>{{ data.article.CreateTime | slice:"8:10" }}</b>
                <i>{{ data.article.CreateTime | slice:":7" }}</i>
            </div>
        </div>
        <div class="app-detail-body">
            <div class="app-blog-content markdown-body">{{ data.article.Content | safe }}</div>
        </div>
        <div class="app-detail-copyright">
            <div class="copyright">
                <div class="item">
                    <i class="fa fa-user"></i>
                    <span>转载请注明来源：</span> <span class="text">{{data.site.Company}}</span>
                </div>
                <div class="item">
                    <i class="fa fa-link"></i>
                    <span>本文链接：</span>
                    <span class="text">
                        <a class="link" href="/article/{{ data.article.Id }}" target="_blank" rel="noopener noreferrer nofollow">https://{{ data.site.Domain }}/article/{{ data.article.Id }}</a>
                    </span>
                </div>
                <div class="item" style="display: none">
                    <i class="fa fa-file-text"></i>
                    <span>许可协议：</span>
                    <span class="text">本文使用《<a class="link" href="//creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener noreferrer nofollow">署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)</a>》协议授权</span>
                </div>
            </div>
        </div>
        <!--/copyright-->

        <div class="comment-tier">
            <div class="art-prev-wrap" title="上一篇">
                {% if(data.prev) %}
                <i class="art-arr">&lt;&lt;</i>{{ data.prev | safe }}
                {% else %}
                <i class="art-no">暂无上一篇</i>
                {% endif %}
            </div>
            <div class="art-next-wrap" title="下一篇">
                {% if(data.next) %}
                    {{ data.next | safe }}<i class="art-arr">&gt;&gt;</i>
                {% else %}
                    <i class="art-no">暂无下一篇</i>
                {% endif %}
            </div>
        </div>

    </div>

    {% if(data.site.AllowComment)  %}
    <div class="app-content-item app-comment-wrap">
        <div class="blog-comment">
            <div class="blog-tips-info"></div>
            <form id="form1" name="form1" action="#">
                <div class="comment-info-main clearfix">
                    <div class="comment-head">
                        <div class="comment-headimg">
                            <img class="avatar" width="50" height="50" src="/public/uploads/visitor.png" id="gravatarView" alt="头像" />
                        </div>
                    </div>
                    <div class="comment-userinfo">
                        <ul class="comment-wrap">
                            <li>
                                <input class="input-text" type="text" value="" placeholder="您的昵称" size="70" autocomplete="off" name="username" id="author" />
                                <i class="require-red">*</i>
                            </li>
                            <li>
                                <input class="input-text" type="text" value="" placeholder="您的邮箱" size="70" name="email" id="email" />
                                <i class="require-red">*</i> <i class="input-after">
                                    <a href="https://cravatar.cn/" target="_blank">了解Cravatar</a>
                                </i>
                            </li>
                            <li>
                                <input class="input-text" type="text" value="" placeholder="您的主页" size="70" name="url" id="url" />
                            </li>
                            <li>
                                <textarea class="common-text blog-text" placeholder="您的评论内容" name="content" id="content" cols="30" rows="10"></textarea>
                                <i class="require-red">*</i>
                            </li>
                            <li>
                                <input class="input-text input-code" maxlength="4" placeholder="验 证 码" autocomplete="off" type="text" name="verify" size="4" id="verify" />
                                <img id="verifyImg" class="cp verify-img" src="/verify" alt="点击刷新验证码" title="点击刷新验证码" />
                            </li>
                            <li>
                                <input type="hidden" name="captchaId" value="" id="captchaId" />
                                <input type="hidden" name="bid" value="{{ data.article.Id }}" id="bid" />
                                <input type="hidden" name="module" value="blog" />
                                <span class="comment-btn"><input class="btn blog-btn" id="sendComment" type="submit" value="发表" /></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
        <!--/comment-->

        <div class="comment-list-wrap">
            <ul class="comment-list">
                {% for vo in data.commentList %}
                    <li>
                        <div class="comment-headimg">
                            <a href="{{ vo.Url }}" title="{{ vo.Username }}" target="_blank">
                                <img class="avatar" width="44" height="44" src="https://cravatar.cn/avatar/{{ vo.Email }}&size=100" alt="Daxun">
                            </a>
                        </div>
                        <div class="comment-main">
                            <div class="comment-name clearfix">
                                <div class="comment-user">
                                    <h1>{{ vo.Username }}</h1>
                                </div>
                                <div class="comment-revert">
                                    <time class="comment-date">{{ vo.CreateTime }}</time>
                                </div>
                            </div>
                            <div class="comment-content">{{ vo.Content | safe | escape }}</div>
                            {% if vo.Children %}
                                {% for reply in vo.Children %}
                                    <div class="reply-items clearfix">
                                        <div class="reply-headimg"><a href="#" title="{{ reply.Username }}" target="_blank"><img  width="44" height="44" src="https://cravatar.cn/avatar/{{ reply.Email }}&size=100" alt=""/></a></div>
                                        <div class="reply-main">
                                            <div class="commet-name clearfix">
                                                <div class="comment-user">
                                                    <h1>{{ reply.Username }}</h1>
                                                </div>
                                                <div class="comment-revert">
                                                    <time class="comment-date">{{ reply.CreateTime }}</time>
                                                    <!--<a href="javascript:void(0)" class="comment-replay">回复<i class="bot-sign"></i></a>-->
                                                </div>
                                            </div>
                                            {% autoescape off %}
                                                <div class="reply-content">{{ reply.Content }}</div>
                                            {% endautoescape %}
                                        </div>
                                    </div>
                                {% endfor %}
                            {% endif %}
                        </div>
                    </li>
                    {% empty %}
                    <div class="no-data">暂无数据</div>
                {% endfor %}
            </ul>
        </div>
        <!--/comment-list-->
    </div>
    {% endif %}
{% endblock %}

{% block script %}
    <script>
        hljs.highlightAll()
    </script>
{% endblock %}